// 流程
<template>
  <!-- 流程 -->
  <div>
    <div
      id="treeChart"
      :style="{ width: '900px', height: '500px', padding: '30px' }"
    ></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      treedata: [{
        name: '石墨工厂',
        children: [
          {
            name: '工艺流程',
            children: [
              {
                name: '煅烧'
              },
              {
                name: '压型'
              },
              {
                name: '焙烧'
              },
              {
                name: '浸渍'
              },
              {
                name: '隧道窑'
              },
              {
                name: '石墨化'
              },
              {
                name: '机加工'
              }
            ]
          },
          {
            name: '货物管理',
            children: [
              {
                name: '货管'
              },
              {
                name: '质检'
              }
            ]
          },
          {
            name: '仓库管理',
            children: [
              {
                name: '仓管'
              }
            ]
          }
        ]
      }]
    }
  },
  mounted () {
    this.showChart()
  },
  methods: {
    showChart () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('treeChart'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            data: this.treedata,
            top: '1%',
            left: '20%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 13
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style>
#outer {
  width: 100%;
  height: 93vh;
  /* border: 1px solid red; */
}
</style>
